<!--
 * @Author: ykp 501436989@qq.com
 * @Date: 2025-05-02 09:48:48
 * @LastEditors: ykp 501436989@qq.com
 * @LastEditTime: 2025-08-14 16:00:32
 * @FilePath: \vue-ts\src\views\todolist\components\cardList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="w-[280px] relative mx-2 overflow-hidden cursor-pointer h-100% bg-white">
    <div class="w-[280px] h-7 flex px-3">
      <div class="flex-1 h-7 text-5 leading-7 text-gray-600">{{ name }}</div>
      <el-popover placement="left" :width="200" trigger="click">
        <template #reference>
          <div class="w-7 h-7 hover:bg-gray-200 rounded-md text-center leading-6 text-2xl">
            ···
          </div>
        </template>
        <div class="w-100% h-100% bg-white">
          <div @click='goEditor()'
            class="w-100% h-7 cursor-pointer text-base leading-7 text-gray-600 flex items-center gap-2 pl-2">
            <el-icon>
              <EditPen />
            </el-icon> 重命名
          </div>
          <div @click='goDel()'
            class="w-100% h-7 cursor-pointer text-base leading-7 text-gray-600 flex items-center gap-2 pl-2">
            <el-icon>
              <DeleteFilled />
            </el-icon> 删除
          </div>
        </div>
      </el-popover>

    </div>
    <div class="overflow-y-auto relative bg-white custom-scrollbar w-100% max-h-[calc(100%-60px)]">
      <card :card-item="item" :key="item.id" v-for="item in cardList"></card>
    </div>
    <div @click="goAdd(id)"
      class="w-[260px] h-7 rounded-md text-center ml-[6px] cursor-pointer text-2xl text-gray-500 border bg-white hover:border-gray-400 border-gray-300 leading-5 bottom-0 left-0">
      +
    </div>
  </div>
  <fromitem v-model="showAdd" :packetType="packetType" :isAbb="isAbb">
  </fromitem>


  <editPage v-model="showEdit" :item="from">
  </editPage>



</template>

<script setup lang="ts">
// 使用 defineOptions 设置组件名称
defineOptions({
  name: 'CardList'
})
import type { cardType, ListType } from "@/type/todolist/card"; //引入ts类型定义
// 由于模块没有默认导出，使用命名导入
// 由于模块没有默认导出，直接使用命名导入（这里假设 card.vue 导出的组件名为默认导出的组件名）
import card from "./card.vue";
import editPage from './editPage.vue'
import { ref, watchEffect } from "vue";
import { addItem, querylist ,putItem} from "../js/indexeddbOperations";
import { queryDetails, deleteItem } from '../js/goTaskStatus'
// const name = ref<string>("");
// name.value = "测试001";
let cardList = ref<cardType[]>([]);
const { id, name, type } = defineProps({
  id: {
    type: String,
    default: "", //任务类型下标
  },
  type: {
    type: String,
    default: "", //紧急程度下标
  },
  name: {
    type: String,
    default: "1111",
  },
});
watchEffect(() => {
  if (id && type) {

    cardList.value = [];
    querylist("importance", type, "packetType", id).then((res) => {
      cardList.value = res as cardType[];
    });
  } else if (id) {
    cardList.value = [];
    querylist("packetType", id).then((res) => {
      console.log(res, id, type);
      cardList.value = res as cardType[];

    });
  }
});


// import {refreshType,goRefresh } from ''
import { useCounterStore } from '../stores/counter'
const pinias = useCounterStore()
watchEffect(() => {

  if (pinias.refreshType && id && type) {
    cardList.value = []
    querylist("importance", type, "packetType", id).then((res) => {
      cardList.value = res as cardType[];
      console.log(res, id, type);
      pinias.goRefresh(false)
    });
  } else if (pinias.refreshType && id) {
    cardList.value = []
    querylist("packetType", id).then((res) => {
      console.log(res, id, type);
      cardList.value = res as cardType[];
      pinias.goRefresh(false)
    });
  }
},)
import fromitem from './fromitem.vue'
const isAbb = ref(true)
const showAdd = ref(false)
const packetType = ref('')
const from = ref<ListType>({
  id: '',
  label: '',
  bgColor: '',
})
const goAdd = function (id: string) {
  packetType.value = id
  showAdd.value = true
}
const showEdit = ref(false)
const goEditor = async function () {

  let item = await queryDetails(id) as any as ListType[]
  from.value = item[0] as ListType
  showEdit.value = true
}
import { ElMessage, ElMessageBox } from 'element-plus'
const goDel = async function () {


  let els = await ElMessageBox.confirm(
    '是否删除该列表,删除分组后记录将迁移到未开始中',
    '删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
 if(!els)return
  if (id == '0') {
    ElMessage({
      type: 'warning',
      message: '无法删除未开始分组',
    })
    return
  }
  let item = await queryDetails(id) as any as ListType[]
  let ids = item[0].ids
  console.log(item)
  let items = await deleteItem(ids+'' )
  if (items) {
    pinias.goRefresh(true)
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
     for(const  itens of  cardList.value){
         itens.packetType = '0'
        await  putItem(itens)
     }
  }

}



</script>


<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 隐藏滚动条轨道 */
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* 自定义滚动条滑块 */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

:deep(::-webkit-scrollbar-button) {
  display: none;
  background: transparent;
  color: transparent;
}

/* 滑块悬停状态 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* 兼容 Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
  -ms-overflow-style: none;
  /* border-radius:5px; */
}
</style>